<template>
  <div>

    <n-card
      :bordered="false"
      title="文件系统信息汇总"
      class="mt-4 proCard"
      size="small"
      :segmented="{ content: true }"
    >
      <n-descriptions bordered label-placement="left" class="py-2" :column="3">
        <n-descriptions-item label="文件总数">{{ counter?.fileCount }}</n-descriptions-item>
        <n-descriptions-item label="链接文件数(unique)">{{ counter?.uniqueFileCount }}</n-descriptions-item>
        <n-descriptions-item label="真实文件数(服务器目录)">{{ counter?.realFileCount }}</n-descriptions-item>
        <n-descriptions-item label="空间总占用">{{ round(counter?.takeUpSpace) }} MB</n-descriptions-item>
        <n-descriptions-item label="空间真实占用(服务器目录)">{{ round(counter?.realTakeUpSpace) }} MB</n-descriptions-item>
      </n-descriptions>
    </n-card>

    <n-card
      :bordered="false"
      title="各用户存储统计"
      class="mt-4 proCard"
      size="small"
      :segmented="{ content: true }"
    >
      <n-table :bordered="false" :single-line="false">
        <thead>
          <tr>
            <th>用户名</th>
            <th>目录数</th>
            <th>文件数</th>
            <th>总占用空间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="c in counter?.fileCounters" :key="c.username">
            <td>{{ c.username }}</td>
            <td>{{ c.folderCount }}</td>
            <td>{{ c.fileCount }}</td>
            <td>{{ round(c.takeUpSpace) }} MB</td>
          </tr>
        </tbody>
      </n-table>
    </n-card>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { round } from "@/utils/NumUtil";
import { fileCounter } from "@/api/system/file";

const counter = ref({})

const init = async () => {
  counter.value = await fileCounter()
}
init()
</script>

<style scoped>

</style>
